.ck-calendar {
  position: relative;
  color: #555555;
  display: inline-block;
  z-index: 1160;
  background-color: white;
  table {
    max-width: 100%;
    background-color: transparent;
    empty-cells: show;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
  }

  th,td {
    text-align: center;
    display: table-cell;
    vertical-align: inherit;
    padding: .2rem .3rem;
  }

  .top-header {
    background-color: #17a2b8!important;
    color: white;
    .th-btn {
      cursor: pointer;
    }
    .th-div {
      height:100%;
    }
    .th-btn:hover {
      background-color: #1d86a2;
    }
    .th-btn:active {
      background-color: #2198b8;
    }
  }

  .header {
    color: #0c80ba;
    border-top: 1px solid #F0F0F0;
  }

  .day {
    cursor: pointer;
  }

  .day:hover {
    background-color: #F0F0F0;
  }

  .active {
    background-color: #17a2b8;
    color: white;
    cursor: pointer;
  }
  .active:hover {
    background-color: #17a2b8;
  }

  .disable {
    color: #dddddd!important;
  }

  &:before,&:after {
    position:absolute;
    display:block;
    content:'';
    border: solid transparent;
  }
}

.ck-calendar-sm {
  font-size: .75rem;
}

.ck-calendar-absolute {
  position: absolute!important;
}
.ck-calendar-none {
  display: none;
}

.ck-calendar-up-sm {
  &:before {
    border-width: 6px!important;
    left: 4px !important;
    top: -12px !important;
  }
  &:after {
    border-width: 4px!important;
    left: 6px !important;
    top: -8px !important;
  }
}

.ck-calendar-up:before{
  border-width: 10px;
  border-bottom-color: #dee2e6;
  /* 定位 */

  left:8px;
  top:-20px;
}

.ck-calendar-up:after{
  border-width: 8px;
  border-bottom-color: #ffffff;

  /* 定位 */
  left:10px;
  top:-16px;
}

.ck-calendar-left:before{
  border-width: 10px;
  border-right-color: #dee2e6;
  /* 定位 */

  left:-20px;
  top:8px;
}

.ck-calendar-left:after{
  border-width: 8px;
  border-right-color: #ffffff;

  /* 定位 */
  left:-16px;
  top:10px;
}

.ck-calendar-right:before{
  border-width: 10px;
  border-left-color: #dee2e6;
  /* 定位 */

  right:-20px;
  top:8px;
}

.ck-calendar-right:after{
  border-width: 8px;
  border-left-color: #ffffff;

  /* 定位 */
  right:-16px;
  top:10px;
}

.ck-calendar-bottom:before{
  border-width: 10px;
  border-top-color: #dee2e6;
  /* 定位 */

  bottom:-20px;
  left:8px;
}

.ck-calendar-bottom:after{
  border-width: 8px;
  border-top-color: #ffffff;

  /* 定位 */
  bottom:-16px;
  left:10px;
}

.ck-calendar-bottom-sm {
  &:before {
    border-width: 6px!important;
    bottom: -12px !important;
    left: 4px !important;
  }
  &:after {
    border-width: 4px!important;
    bottom: -8px !important;
    left: 6px !important;
  }
}

.ck-shadow {
  box-shadow: 0 .1rem 1rem rgba(0,0,0,.1)!important;
}

.ck-calendar-list {
  white-space: break-spaces;
  background-color: white;
  border: 1px solid #dee2e6;
  padding: 0.3rem;
  text-align: center;
  .item {
    display: inline-block;
    cursor: pointer;
    padding: .2rem .3rem;
    width: 33%;
    &:hover {
      background-color: #F0F0F0;
    }
    &:active {
      background-color: #dedede;
    }

    .active {
      background-color: #17a2b8;
      color: white;
    }
    .active:hover {
      background-color: #17a2b8!important;
    }
  }
}

.ck-calendar-time-item {
  padding: 3px 1rem;
  cursor: pointer;
  white-space: nowrap;
  &:hover {
    background-color: #F0F0F0;
  }
}